<template>
    <div>
        <el-upload ref="ref_upload" action="#" list-type="picture-card" :class="{ 'hide_btn': hideBtn }" accept="image/*" :limit="limit" :file-list="fileList" :multiple="multiple" :auto-upload="autoUpload" :on-preview="onPreview" :on-change="onChange" :on-exceed="onExceed" :on-remove="onRemove" :before-remove="beforeRemove" :before-upload="beforeUpload" :http-request="uploadFile">
            <template #default>
                <div class="upload_add">+</div>
            </template>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img :src="dialogImageUrl" style="display: block; width: 100%;" />
        </el-dialog>
    </div>
</template>

<script>
import { bucketUpload } from "../utils/ali-oss.js";
export default {
    name: "upload_image",
    props: {
        dir: { //文件目录
            type: String,
            required: true
        },
        fileList: {
            type: Array,
            default: () => { return [] }
        },
        limit: {
            type: Number,
            default: 9
        },
        autoUpload: {
            type: Boolean,
            default: true
        },
    },
    data() {
        return {
            multiple: true, //多选
            hideBtn: false,
            dialogVisible: false,
            dialogImageUrl: "",
        }
    },
    mounted() {
        if (this.limit == 1) this.multiple = false
        this.hideBtn = this.fileList.length >= this.limit
    },
    methods: {
        //添加文件、上传成功或失败 都会调用
        onChange(files, fileList) {
            this.fileChange(fileList)
        },
        fileChange(fileList) {
            // console.warn('fileList', fileList);
            this.hideBtn = fileList.length >= this.limit
            const keyList = []
            fileList.forEach(item => {
                keyList.push(item.key || item.response?.key)
            })
            this.$emit('onFilesChange', keyList)
        },
        // 文件删除之前
        beforeRemove(file, fileList) {
            // if (this.limit == 1) {
            // }
            // return this.$confirm(`确定移除 ${file.name ? file.name : ""}？`, "温馨提示", {
            //     confirmButtonText: "确认",
            //     cancelButtonText: "取消",
            // }).then(() => {
            //     this.$emit('onDelFile', file.name || file.key)
            // }).catch(() => false) //return false才会取消删除
        },
        //删除文件
        onRemove(files, fileList) {
            this.fileChange(fileList)
        },
        // 数量超限制
        onExceed(files, fileList) {
            const count = this.limit - fileList.length
            this.$message({ message: `只能再选 ${count} 张图片`, type: 'error', duration: 3000 })
        },
        // 点击文件预览
        onPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        // 上传文件之前 return false会终止上传
        beforeUpload(file) {

        },
        // 上传文件
        uploadFile(op) {
            bucketUpload(
                this.dir,
                op.file,
                res => {
                    op.onSuccess({ key: res.url, url: 'https://suyuan.paopaofu.com/' + res.url })
                },
                err => {
                    console.warn(err)
                    op.onError(err)
                },
            )
        },
        // 手动上传
        startUpload() {
            this.$refs['ref_upload'].submit()
        },
    },
}
</script>

<style lang="scss">
.hide_btn .el-upload--picture-card {
    display: none;
}

.upload_add {
    margin-top: -4px;
    color: #999999;
    font-size: 30px;
}
</style>